<template>
	<view class="from_item">
		<view v-if="type=='inputs'" :style="`margin-top:${top};min-height:${longT}`" class="cu-form-group">
			
			<!--nameColor min-height: 160upx; -->
			<view :style="`color:${nameColor}`" class="title" :class="longT==''?'longs':'long'" >{{title}}</view>
			<input  :disabled="disable" class="input_item"  name="fSamplespecs" v-model="data" :style="`text-align:${flex};color:${projectName}`"></input>
		</view>
		<view v-if="type=='input'" :style="`margin-top:${top};min-height:${longT}`" class="cu-form-group">
			<image :src="icon" mode="" style="width: 30upx;height: 30upx;vertical-align: middle;">
			</image>
			<!--nameColor min-height: 160upx; -->
			<view :style="`color:${nameColor}`" class="title" :class="longT==''?'longs':'long'" >{{title}}</view>
			<input  :disabled="disable" class="input_item"  name="fSamplespecs" v-model="data" :style="`text-align:${flex};color:${projectName}`"></input>
		</view>
		<view v-if="type=='textarea'" class="cu-form-group align-start" :style="`margin-top:${top}`">
			<image :src="icon" mode="" style="width: 30upx;height: 30upx;vertical-align: middle;">
			</image>
			<view class="title" :style="`color:${nameColor}`">{{title}}</view>
			<textarea :disabled="disable" v-model="data" maxlength="-1"></textarea>
		</view>
		
		<!-- <view v-if="type=='textarea'" class="cu-form-group align-start" :style="`margin-top:${top}`">
			<image :src="icon" mode="" style="width: 30upx;height: 30upx;vertical-align: middle;">
			</image>
			<view class="title" :style="`color:${nameColor}`">{{title}}</view>
			<textarea :disabled="disable" v-model="data" maxlength="-1"></textarea>
		</view>
		
		<u-picker :show="show" :columns="columns"></u-picker> -->
<!-- 		<uni-data-picker v-slot:default="{data, error, options}" popup-title="请选择所在地区">
		  <view v-if="error" class="error">
		    <text>{{error}}</text>
		  </view>
		  <view v-else-if="data.length" class="selected">
		    <view v-for="(item,index) in data" :key="index" class="selected-item">
		      <text>{{data[data.length-1].text}}</text>
		    </view>
		  </view>
		  <view v-else>
		    <text>请选择</text>
		  </view>
		</uni-data-picker> -->
		
		<view v-if="type=='textareas'" class="cu-form-group align-start" :style="`margin-top:${top}`">
			
			<view class="title" :style="`color:${nameColor}`">{{title}}</view>
			<textarea :disabled="disable" v-model="data" maxlength="-1"></textarea>
		</view>
		<!-- photos -->
		<view v-if="type=='photos'">
			
			<view class="cu-bar bg-white" >
				<view style="display: flex;">
					
					<view class="action" :style="`color:${nameColor}`" style="margin-left: 0;font-size: 30upx;">
						{{title}}
					</view>
				</view>
				<view class="action" v-if="data.length>1">
					{{data.length}}/{{num}}
				</view>
			</view>
			<view class="cu-form-group">
				<view class="grid col-4 grid-square flex-sub">
					<view class="bg-img" v-for="(item,index) in data" :key="index" @tap="ViewImage"
						:data-url="data[index]">
						<image :src="data[index]" mode="aspectFill"></image>
					</view>
				</view>
			</view>
		</view>
		<!-- <view v-if="type=='photoView'">
			
			<view class="cu-bar bg-white" >
				<view style="display: flex;">
					<image :src="icon" mode="" style="width: 30upx;height: 30upx;vertical-align: middle;">
					</image>
					<view class="action"  style="margin-left: 30upx;font-size: 30upx;color:rgb(152, 152, 152) ;">
						{{title}}
					</view>
				</view>
				<view class="action" v-if="dataS.length>1">
					{{dataS.length}}/{{num}}
				</view>
			</view>
			<view class="cu-form-group">
				<view class="grid col-4 grid-square flex-sub">
					<view class="bg-img" v-for="(item,index) in dataS" :key="index" @tap="ViewImage"
						:data-url="dataS[index]">
						<image :src="dataS[index]" mode="aspectFill"></image>
					</view>
				</view>
			</view>
		</view> -->
		<view v-if="type=='photo'">
			
			<view class="cu-bar bg-white" >
				<view style="display: flex;">
					<image :src="icon" mode="" style="width: 30upx;height: 30upx;vertical-align: middle;">
					</image>
					<view class="action"  style="margin-left: 30upx;font-size: 30upx;color:rgb(152, 152, 152) ;">
						{{title}}
					</view>
				</view>
				<view class="action" v-if="data.length>1">
					{{data.length}}/{{num}}
				</view>
			</view>
			<view class="cu-form-group">
				<view class="grid col-4 grid-square flex-sub">
					<view class="bg-img" v-for="(item,index) in data" :key="index" @tap="ViewImage"
						:data-url="data[index]">
						<image :src="data[index]" mode="aspectFill"></image>
					</view>
				</view>
			</view>
		</view>
		<view v-if="type=='video'" class="grace-file-list" style="padding: 0;margin-bottom: 50upx">
			<view class="cu-bar bg-white">
				<view class="action">
					{{title}}
				</view>
				<view class="action">
					<image @tap.stop="changeContent" style="width: 30upx;height: 30upx;margin-bottom: 20upx;"
						:src="isSrc" mode=""></image>
				</view>
			</view>
			<view v-show="contentShow" class="items" style="background-color: #fff;" v-for="(item, index) in data"
				:key="index">
				<view v-if="data.length>0" class="video-bg"
					style="position:relative;display: flex;justify-content: center;align-items: center;width: 80%;margin:auto;padding: 20upx 0;">
					<!-- <video :id="item.id" :src="item.filePath" mode="aspectFit" :data-imgurl="item.filePath" style="" controls></video> -->
					<image v-show="data[index].needload != 'true'" :src="item.src" :id="item.id" style=""
						@click="interVideo(item.filePath)"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "from-item",
		props: {
			title: {
				type: String,
				default: ''
			},
			flex:{
				type: String,
				default: 'right'
			},
			top: {
				type: String,
				default: ''
			},
			nameColor:{
				type: String,
				default: '#333333'
			},
			projectName :{
				type: String,
				default: '#333333'
			},
			longT:{
				type:String,
				default:""
			},
			num:{
				type:Number,
				default:1
			},
			data: "",
			type: {
				type: String,
				default: 'input'
			},
			disable: {
				type: Boolean,
				default: true
			},
			icon: {
				type: String,
				default: require("../../static/unscope.png")
			},
			isSrc: {
				type: String,
				default: require("../../static/down.png")
			},
			// dataS:{
			// 	type: Array,
			// 	default:function(){
			// 		return []
			// 	}
			// },


		},
		data() {
			return {
				// data:123
				contentShow: false,
			};
		},
		watch:{
			icon(newVal) {
				// console.log(newVal)
				this.icon=newVal
			},
			
			// dataS:{
			// 	handler(val){
			// 		console.log(val)
			// 	},
			// 	deep:true
			// }
			
		},
		methods: {
			// 预览照片
			ViewImage(e) {
				uni.previewImage({
					urls: this.data,
					current: e.currentTarget.dataset.url
				});
			},
			// 控制视频折叠面板
			changeContent() {
				// this.isSrc=""
				this.contentShow = !this.contentShow
			},
			interVideo(src) {
				// console.log(src)
				uni.navigateTo({
					url: '/pages/commonVideo/commonVideo?src=' + src
				});
			},
		}
	}
</script>

<style lang="less" scoped>
	.from_item {
		border-top: 1upx solid #eee;

		.cu-form-group .input_item {
			// text-align: right;
		}
	}
	.long {
		width: 270upx !important;
		display: inline-block;
		height: 100upx;
		/* overflow: hidden; */
	}
	.longs {
		
	}
</style>
